const path = require('path')
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require('@ckeditor/ckeditor5-dev-utils')

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // options placed here will be merged with default configuration and passed to electron-builder
        appId: 'xxxx',
        productName: 'TUSHOW',
        nsis: {
          installerIcon: 'public/favicon.ico',
          installerHeader: 'public/favicon.ico',
          installerHeaderIcon: 'public/favicon.ico',
          oneClick: false,
          allowToChangeInstallationDirectory: true,
          runAfterFinish: false
        },
        win: {
          target: 'nsis',
          icon: 'public/favicon.ico',
          legalTrademarks: 'http://www.baidu.com/'
        },
        mac: {
          target: 'dmg',
          icon: 'public/favicon.ico'
        },
        dmg: {
          title: 'TUSHOW Mac',
          icon: 'public/favicon.ico',
          contents: [
            {
              x: 110,
              y: 150
            },
            {
              x: 240,
              y: 150,
              type: 'link',
              path: '/Applications'
            }
          ],
          window: {
            x: 400,
            y: 400
          }
        }
      }
    }
  },
  // ckeditor5
  transpileDependencies: [
    /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/
  ],

  configureWebpack: {
    plugins: [
      // CKEditor needs its own plugin to be built using webpack.
      /* new CKEditorWebpackPlugin({
        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
        language: 'en',

        // Append translations to the file matching the `app` name.
        translationsOutputFile: /app/
      }) */

    ],
    // echarts
    externals: {
    }
  },

  // Vue CLI would normally use its own loader to load .svg and .css files, however:
  // 1. The icons used by CKEditor must be loaded using raw-loader,
  // 2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
  chainWebpack: config => {
    // development vs product
    /* config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    }) */

    // (1.) To handle editor icons, get the default rule for *.svg files first:
    const svgRule = config.module.rule('svg')

    // Then you can either:
    //
    // * clear all loaders for existing 'svg' rule:
    //
    // svgRule.uses.clear();
    //
    // * or exclude ckeditor directory from node_modules:
    svgRule.exclude.add(path.join(__dirname, 'node_modules', '@ckeditor'))

    // Add an entry for *.svg files belonging to CKEditor. You can either:
    //
    // * modify the existing 'svg' rule:
    //
    // svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
    //
    // * or add a new one:
    config.module
      .rule('cke-svg')
      .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
      .use('raw-loader')
      .loader('raw-loader')

    // (2.) Transpile the .css files imported by the editor using PostCSS.
    // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
    config.module
      .rule('cke-css')
      .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
      .use('postcss-loader')
      .loader('postcss-loader')
      .tap(() => {
        return styles.getPostCssConfig({
          themeImporter: {
            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
          },
          minify: true
        })
      })
    // webpack-bundle-analyzer
    /* config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) */
  }
}
